<template>
  <div>
    <el-card style="min-width:1200px">
      <div class="role">
        <img src="@/assets/imgs/setting/add.png" class="img" />
        <div>
          <div class="title">角色权限</div>
          <div class="hint">
            管理平台还提供了四种默认角色「管理员」「运营」「技术」「财务」，默认角色权限可编辑。如果你需要其他角色，可
          </div>
          <div class="hint">点击「添加」按钮自定义角色权限。</div>
          <div class="alert">
            <i class="el-icon-warning"></i>
            <span
              >提交企业审核的成员为系统管理员（支付负责人），系统管理员（支付负责人）拥有全部应用的所有权限。</span
            >
          </div>
        </div>
      </div>
    </el-card>
    <div class="listWrap" style="min-width:1200px">
      <div class="item" v-for="(item, index) of list" :key="item.id">
        <div>
          <div class="name">{{ item.name }}</div>
          <div class="hint2">{{ item.remark }}</div>
          <!-- <div class="btn" @click="goEdit(item.id, index)">编辑</div> -->
          <el-button class="width120 btn" @click="goEdit(item.id, index)">编辑</el-button>
          <div 
            style="
              position: absolute;
              top: 5px;
              right: 20px;
              font-size:16px;
              cursor: pointer;"
            @click="goDel(item, index)"
            v-if="item.roleType!='default'"
          >
            <i class="el-icon-close" style="font-size:14px;"></i>
          </div>
        </div>
        <el-avatar
        style="position: absolute;right:30px;border-radius:2px;"
          :size="60"
          :src="require('@/assets/imgs/qiye/add.png')"
        ></el-avatar>
      </div>
      <div class="addIcon" @click="goAdd">
        <i class="el-icon-circle-plus-outline"></i>
        <div>添加角色</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "rolePermissions",
  data() {
    return {
      input2: "",
      input3: "",
      list: [],
      id: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$http.post("/role/all").then((res) => {
        if (res.code === "0000") {
          this.list = res.data;
        }
      });
    },
    goAdd() {
      this.$router.push("/qiye/addRole");
    },
    goEdit(id, index) {
      this.$router.push({ name: "addRole", query: { id, index } });
    },
    goDel(row) {
      let that = this;
      that
        .$confirm(`确定删除 [${row.name}] 该角色?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose:false,
            closeOnClickModal:false,
            closeOnPressEscape:false,
          customClass: "confirm",
          type: "warning",
          center: true,
        })
        .then(() => {
          // const params = new FormData();
          // params.append("roleId ", row.id);
          let params = {
            roleId: row.id
          };

          this.$http.delete(`/role/delete?roleId=${row.id}`).then((res) => {
            if (res.code === "0000") {
              this.$message.success("删除成功！");
              this.getList();
            }
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.role {
  display: flex;
  padding: 20px;
  .img {
    width: 86px;
    height: 86px;
    margin-right: 40px;
  }
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #4f595f;
    margin-bottom: 5px;
  }
  .hint {
    color: #869daa;
    line-height: 30px;
  }
  .alert {
    width: 736px;
    height: 42px;
    background: #fff9f9;
    border-radius: 6px;
    border: 1px solid #f7d8d8;
    color: #fc8f90;
    line-height: 42px;
    margin-top: 32px;
    .el-icon-warning {
      margin: 0 20px;
      font-size: 16px;
    }
  }
}
.listWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-top: 20px;
  .item {
    height: 220px;
    min-width:23.5%;
    width:23.5%;
    margin-right:2%;
    overflow: hidden;
    padding: 40px 30px;
    position: relative;
    display: flex;
    background: #fff;
    box-shadow: 0px 1px 4px 0px rgba(212, 224, 233, 0.5);
    border-radius: 10px;
    // justify-content:start;
    margin-bottom: 20px;
    &:nth-child(4n + 4) {
                margin-right: 0;
            }

    .name {
      font-size: 16px;
      font-weight: 500;
      color: #4f595f;
      line-height: 28px;
    }
    .hint2 {
      width: 280px;
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      line-height: 20px;
    }
    .btn {
      position: absolute;
      left: 30px;
      bottom: 40px;
      cursor: pointer;
    }
  }
  .addIcon {
    text-align: center;
    min-width:23.5%;
    width:23.5%;
    height: 220px;
    background: #f7f8fa;
    border-radius: 14px;
    border: 1px dashed #869daa;
    box-shadow: 0px 1px 4px 0px rgba(212, 224, 233, 0.5);
    color: #869daa;
    font-size: 16px;
    padding-top: 78px;
    cursor: pointer;
    .el-icon-circle-plus-outline {
      font-size:28px;
      margin-bottom: 5px;
    }
  }
}
</style>